<template>
	<view>
		<view v-for="(item,index2) in  listdata" :key="index2" class="yhq">
			<view class="qbottom">
				<u-collapse>
					<u-collapse-item title="使用说明" name="Docs guide">
						<text class="u-collapse-content" v-for="(js,index3) in item.instructions" :key="js">
							{{index3+1}}.{{js}}

						</text>
					</u-collapse-item>

				</u-collapse>

			</view>

			<view class="qtop">
				<!-- 价格 -->
				<view class="jg">
					<text class="da">￥{{item.price}}</text>
					<text class="ggz"> {{item.rule}}</text>

				</view>
				<!-- 名字 和日期-->
				<view class="namda">
					<text class="na">{{item.name}}</text>
					<text class="nariq">有效期至{{item.lifespan}}</text>

				</view>

				<!-- 按钮 -->
				<view class="an">
					<u-button v-if="item.status==0" text="去使用" color='#4468ff' size="mini" shape="circle"
						style="width:20px" @click="toUse"></u-button>
					<u-button v-else-if="item.status==3" text="立即领取" color='#4468ff' size="mini" shape="circle"
						style="width:20px" @click="toUse"></u-button>
					<u-button v-else-if="item.status==4" text="已领取" color='#4468ff' size="mini" shape="circle"
						style="width:20px" @click="toUse"></u-button>
					<image src="/static/已使用.png" style="width: 50px;height: 50px;" v-else-if="item.status==1" mode="">
					</image>

					<!-- <u-button v-else-if="item.status==2" text="已过期" color='#4468ff' size="mini" shape="circle" style="width:20px"
						@click="toUse"></u-button> -->
					<image src="/static/已失效.png" style="width: 50px;height: 50px;" v-else-if="item.status==2" mode="">
					</image>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		props: ['listdata'],
		data() {
			return {

			}
		},
		methods: {
			toUse() {

			}
		}
	}
</script>

<style lang="less">
	.yhq {
		margin: 5px;
		// padding: 0px 65px;

		.qtop {
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 8px;
			border-radius: 8px;

			.jg {
				display: flex;
				flex-direction: column;

				justify-content: space-between;
				align-items: center;
				color: #f84945;

				.da {
					font-size: 20px;
				}

				.ggz {
					font-size: 12px;
					margin-top: 5px;
				}

			}

			.namda {
				display: flex;
				flex-direction: column;

				justify-content: space-between;
				align-items: center;

				.na {
					color: #3a3c3c;
				}

				.nariq {
					margin-top: 5px;
					font-size: 12px;
					color: #b1adab;
				}
			}

			.an {
				width: fit-content;
			}
		}
	}
</style>